<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content" ref="ageProportionStatistics">
        2019
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis6-nianlingzhanbitj',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      // 住院业务量占比
      const option71 = {
          backgroundColor: '',
          grid: {
              top: 35,
              bottom: 40,
          },
          tooltip: {},
          xAxis: {
              data: ['25岁以下', '25-34岁','35-44岁','45岁-54岁','55岁-59岁','60岁以上'],
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: false,
              },
              axisLabel: {
                  interval: 0,
                  textStyle: {
                      color: '#beceff',
                      fontSize: 10,
                  },
                  margin: 20, //刻度标签与轴线之间的距离。
              },
          },
          yAxis: {
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: false,
              },
              axisLabel: {
                  show: false,
              },
          },
          series: [
              {
                  name: '头顶圆',
                  type: 'pictorialBar',
                  symbolSize: [10, 5],
                  symbolOffset: [0, -4],
                  z: 12,
                  data: [
                      {
                          name: '25岁以下',
                          value: '1000',
                          trueVal: '100',
                          symbolPosition: 'end',
                          itemStyle: {
                              normal: {
                                  color: '#ffcc00', //圆柱顶部颜色
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '981',
                          trueVal: '98',
                          symbolPosition: 'end',
                          itemStyle: {
                              normal: {
                                  color: '#01CF77', //圆柱顶部颜色
                              },
                          },
                      },
                      {
                          name: '35-44岁',
                          value: '881',
                          trueVal: '88',
                          symbolPosition: 'end',
                          itemStyle: {
                              normal: {
                                  color: '#01CF77', //圆柱顶部颜色
                              },
                          },
                      },
                      {
                          name: '45岁-54岁',
                          value: '781',
                          trueVal: '78',
                          symbolPosition: 'end',
                          itemStyle: {
                              normal: {
                                  color: '#01CF77', //圆柱顶部颜色
                              },
                          },
                      },
                      {
                          name: '55岁-59岁',
                          value: '681',
                          trueVal: '68',
                          symbolPosition: 'end',
                          itemStyle: {
                              normal: {
                                  color: '#01CF77', //圆柱顶部颜色
                              },
                          },
                      },
                      {
                          name: '60岁以上',
                          value: '581',
                          trueVal: '58',
                          symbolPosition: 'end',
                          itemStyle: {
                              normal: {
                                  color: '#01CF77', //圆柱顶部颜色
                              },
                          },
                      },
                  ],
              },
              {
                  name: '脚底圆',
                  type: 'pictorialBar',
                  symbolSize: [10, 5],
                  symbolOffset: [0, 1],
                  z: 12,
                  data: [
                      {
                          name: '25岁以下',
                          value: '1000',
                          trueVal: '100',
                          itemStyle: {
                              normal: {
                                  color: '#ff7800', //圆柱底部颜色
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '981',
                          trueVal: '98',
                          itemStyle: {
                              normal: {
                                  color: '#01CF78', //圆柱底部颜色
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '881',
                          trueVal: '98',
                          itemStyle: {
                              normal: {
                                  color: '#21CF78', //圆柱底部颜色
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '781',
                          trueVal: '98',
                          itemStyle: {
                              normal: {
                                  color: '#41CF78', //圆柱底部颜色
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '681',
                          trueVal: '98',
                          itemStyle: {
                              normal: {
                                  color: '#61CF78', //圆柱底部颜色
                              },
                          },
                      },
                  ],
              },
              {
                  name: '底部外圈',
                  type: 'pictorialBar',
                  symbolSize: [20, 10],
                  symbolOffset: [0, 5],
                  z: -8,
                  data: [
                      {
                          name: '25岁以下',
                          value: '1000',
                          trueVal: '100',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#ff7800', //底部内圆圈颜色
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '981',
                          trueVal: '98',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#01CF78', //底部内圆圈颜色
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '881',
                          trueVal: '88',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#11CF78', //底部内圆圈颜色
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '781',
                          trueVal: '78',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#21CF78', //底部内圆圈颜色
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '681',
                          trueVal: '68',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#31CF78', //底部内圆圈颜色
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '581',
                          trueVal: '58',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#41CF78', //底部内圆圈颜色
                                  borderWidth: 5,
                              },
                          },
                      },
                  ],
              },
              {
                  name: '底部内圈',
                  type: 'pictorialBar',
                  symbolSize: [10, 5],
                  symbolOffset: [0, 5],
                  z: -8,
                  data: [
                      {
                          name: '25岁以下',
                          value: '1000',
                          trueVal: '100',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#ff7800', //底部外圆圈颜色
                                  borderType: 'dashed',
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '981',
                          trueVal: '98',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#047054', //底部外圆圈颜色
                                  borderType: 'dashed',
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '35-44岁',
                          value: '881',
                          trueVal: '88',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#147054', //底部外圆圈颜色
                                  borderType: 'dashed',
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '45岁-54岁',
                          value: '781',
                          trueVal: '78',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#247054', //底部外圆圈颜色
                                  borderType: 'dashed',
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '55岁-59岁',
                          value: '681',
                          trueVal: '68',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#347054', //底部外圆圈颜色
                                  borderType: 'dashed',
                                  borderWidth: 5,
                              },
                          },
                      },
                      {
                          name: '60岁以上',
                          value: '581',
                          trueVal: '58',
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                                  borderColor: '#347054', //底部外圆圈颜色
                                  borderType: 'dashed',
                                  borderWidth: 5,
                              },
                          },
                      },
                  ],
              },
              {
                  type: 'bar',
                  silent: true,
                  barWidth: 10,
                  barGap: '-100%',

                  data: [
                      {
                          name: '25岁以下',
                          value: '1000',
                          trueVal: '100',
                          label: {
                              normal: {
                                  show: true,
                                  position: 'top',
                                  distance: 10,
                                  textStyle: {
                                      color: '#ffcc00', //柱子对应数值颜色
                                      fontSize: 14,
                                  },
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      type: 'linear',
                                      global: false,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#0E0E17',
                                          },
                                          {
                                              offset: 1,
                                              color: '#FFBC00', //底部渐变颜色
                                          },
                                      ],
                                  },
                              },
                          },
                      },
                      {
                          name: '25-34岁',
                          value: '981',
                          trueVal: '98',
                          label: {
                              normal: {
                                  show: true,
                                  position: 'top',
                                  distance: 10,
                                  textStyle: {
                                      color: '#01CF77', //柱子对应数值颜色
                                      fontSize: 14,
                                  },
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      type: 'linear',
                                      global: false,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#23221A',
                                          },
                                          {
                                              offset: 1,
                                              color: '#00FF8B', //底部渐变颜色
                                          },
                                      ],
                                  },
                              },
                          },
                      },
                      {
                          name: '35-44岁',
                          value: '881',
                          trueVal: '88',
                          label: {
                              normal: {
                                  show: true,
                                  position: 'top',
                                  distance: 10,
                                  textStyle: {
                                      color: '#01CF77', //柱子对应数值颜色
                                      fontSize: 14,
                                  },
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      type: 'linear',
                                      global: false,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#23221A',
                                          },
                                          {
                                              offset: 1,
                                              color: '#FE8553', //底部渐变颜色
                                          },
                                      ],
                                  },
                              },
                          },
                      },
                      {
                          name: '45岁-54岁',
                          value: '781',
                          trueVal: '78',
                          label: {
                              normal: {
                                  show: true,
                                  position: 'top',
                                  distance: 10,
                                  textStyle: {
                                      color: '#01CF77', //柱子对应数值颜色
                                      fontSize: 14,
                                  },
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      type: 'linear',
                                      global: false,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#23221A',
                                          },
                                          {
                                              offset: 1,
                                              color: '#24C4F8', //底部渐变颜色
                                          },
                                      ],
                                  },
                              },
                          },
                      },
                      {
                          name: '55岁-59岁',
                          value: '681',
                          trueVal: '68',
                          label: {
                              normal: {
                                  show: true,
                                  position: 'top',
                                  distance: 10,
                                  textStyle: {
                                      color: '#01CF77', //柱子对应数值颜色
                                      fontSize: 14,
                                  },
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      type: 'linear',
                                      global: false,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#23221A',
                                          },
                                          {
                                              offset: 1,
                                              color: '#CA85E8', //底部渐变颜色
                                          },
                                      ],
                                  },
                              },
                          },
                      },
                      {
                          name: '60岁以上',
                          value: '581',
                          trueVal: '58',
                          label: {
                              normal: {
                                  show: true,
                                  position: 'top',
                                  distance: 10,
                                  textStyle: {
                                      color: '#01CF77', //柱子对应数值颜色
                                      fontSize: 14,
                                  },
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      type: 'linear',
                                      global: false,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#23221A',
                                          },
                                          {
                                              offset: 1,
                                              color: '#F1E639', //底部渐变颜色
                                          },
                                      ],
                                  },
                              },
                          },
                      }
                  ],
              },
          ],
      };
      this.makeGraph(this.$refs.ageProportionStatistics,option71)

    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>